import { Button, Form, Input } from 'antd'
import styles from './index.module.scss'
import type { IParams } from '@/types/loginType'
import api from '@/api/userApi'
import { useState } from 'react'
import storage from '@/utils/storage'
import useStore from '@/store'
function Login() {
  const [loading, setLoading] = useState(false)
  const updateToken = useStore(state => state.updateToken)
  const onFinish = async (value: IParams) => {
    setLoading(true)
    try {
      const res = await api.login(value)
      storage.set('token', res)
      updateToken(res)
      const search = new URLSearchParams(location.search)
      location.href = search.get('callback') || '/welcome'
    } catch {
      setLoading(false)
    }
  }
  const onFinishFailed = () => []
  return (
    <div className={styles.login}>
      <div className={styles.loginWrapper}>
        <div className={styles.title}>系统登录</div>
        <Form
          name='basic'
          initialValues={{ userName: '189363638', userPwd: '624697' }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete='off'
        >
          <Form.Item name='userName' rules={[{ required: true, message: '请输入用户名' }]}>
            <Input placeholder='请输入用户名' />
          </Form.Item>

          <Form.Item name='userPwd' rules={[{ required: true, message: '请输入密码' }]}>
            <Input.Password placeholder='请输入密码' />
          </Form.Item>

          <Form.Item label={null}>
            <Button block type='primary' htmlType='submit' loading={loading}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Login
